import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  ListView,
  Image,
} from 'react-native';
import { SwipeListView } from 'react-native-swipe-list-view';

import VisitRemindHeader from './VisitRemindHeader';
import ChangeVisitReminder from '../../../containers/changeVisitReminderContainer';
import PxToDp from '../../../utils/PxToDp';
import FontFamilys from '../../../utils/FontFamilys';

import { deleteVisitReminder, fetchMoreVisit } from '../../../actions/MyCustomerDetailAction';

class VisitReminder extends Component {
  constructor(props) {
    super(props);

    const { visit } = this.props;
    const { reminds } = visit;

    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      reminds,
    };
  }

  // 删除操作
  _deleteRow(secId, rowId, rowMap) {
    rowMap[`${secId}${rowId}`].closeRow();
    const newReminds = [...this.state.reminds];
    const remind = newReminds[rowId];
    const vid = remind.id;
    const { dispatch } = this.props;

    const uid = this.props.id;

    // 删除一条数据
    dispatch(deleteVisitReminder(uid, vid, () => {
      const { id } = this.props;
      dispatch(fetchMoreVisit(id));
      newReminds.splice(rowId, 1);
      this.setState({ reminds: newReminds });
    }));
  }

  _goBack() {
    const { dispatch, id } = this.props;
    dispatch(fetchMoreVisit(id));
    this.props.navigator.pop();
  }
  _goChangeVisitReminder(remind) {
    const title = '修改拜访提醒';
    const type = 'change';
    const { data, dispatch, id } = this.props;
    this.props.navigator.push({
      component: ChangeVisitReminder,
      passProps: {
        title,
        data,
        dispatch,
        id,
        type,
        remind,
      },
    });
  }

  componentDidMount() {
    const { dispatch, id } = this.props;
    dispatch(fetchMoreVisit(id));
  }

  render() {
    const { data, dispatch, id, visit } = this.props;
    const reminds = visit ? visit.reminds : null;

    return (
      <View style={[styles.flex, styles.bgColor]}>
        <VisitRemindHeader
          backName="拜访提醒"
          navigator={this.props.navigator}
          data={data}
          dispatch={dispatch}
          id={id}
          onPress={() => this._goBack()}
        />
        <ScrollView style={styles.flex}>
          {reminds && reminds.length > 0 &&
          <View style={styles.listView}>
            <SwipeListView
              dataSource={this.ds.cloneWithRows(reminds)}

              renderRow={remind => (
                <TouchableOpacity
                  activeOpacity={1}
                  onPress={() => this._goChangeVisitReminder(remind)}
                  style={[styles.row, styles.list, styles.between]}
                  underlayColor={'#fff'}
                >
                  <View style={styles.row}>
                    <Text style={[styles.time, styles.right14]}>{remind.week}</Text>
                    <Text style={[styles.time, styles.right14]}>{remind.visit_at}</Text>
                  </View>
                  <Image source={require('../../../img/next.png')} />
                </TouchableOpacity>
            )}
              renderHiddenRow={(remind, secId, rowId, rowMap) => (
                <View style={[styles.rowBack]}>
                  <TouchableOpacity
                    style={[styles.backRightBtn, styles.backRightBtnRight]} onPress={() =>
                  this._deleteRow(secId, rowId, rowMap)}
                  >
                    <Text style={styles.backTextWhite}>删除</Text>
                  </TouchableOpacity>
                </View>
            )}
              leftOpenValue={0}
              rightOpenValue={-75}
            />
          </View>

        }
        </ScrollView>
      </View>);
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  bgColor: {
    backgroundColor: '#F9F9F9',
  },
  row: {
    flexDirection: 'row',
  },
  between: {
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  list: {
    width: '100%',
    height: PxToDp(48),
    backgroundColor: '#fff',
    borderBottomWidth: PxToDp(0.5),
    borderStyle: 'solid',
    borderColor: '#dadada',
  },
  time: {
    color: '#121212',
    fontSize: PxToDp(14),
  },
  right14: {
    marginRight: PxToDp(14),
  },
  backRightBtn: {
    alignItems: 'center',
    bottom: 0,
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    width: 75,
  },
  backRightBtnRight: {
    backgroundColor: '#f65252',
    right: 0,
  },
  backTextWhite: {
    color: '#FFF',
    fontSize: PxToDp(14),
    fontFamily: FontFamilys(),
  },
  rowBack: {
    alignItems: 'center',
    height: PxToDp(54),
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingLeft: 15,
  },
  listView: {
    marginTop: PxToDp(20),
    borderColor: '#e4e4e4',
    borderStyle: 'solid',
    borderWidth: PxToDp(0.5),
    paddingBottom: PxToDp(25),
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
    backgroundColor: '#fff',
  },
});

export default VisitReminder;
